<template>
	<view v-if="showLoading">
		<view class="bg-loading bg-white flex flex-sub flex-direction shadow-lg align-center justify-center">
			<image src="https://image.weilanwl.com/gif/loading-white.gif" mode="aspectFit" class="gif-white response"></image>
		</view>
	</view>
	<view v-else>
		<!-- 轮播图 -->
		<screenSwiper :swiperItems="slider_images"></screenSwiper>

		<view class="padding bg-white">
			<view class="flex justify-between align-end">
				<view class="">
					<text class="text-price text-xxl text-red text-bold">{{goodsDetail.price}}</text><text class="text-price text-bold text-lg padding-left-sm">{{goodsDetail.vip_price}}</text>
				</view>
				<view class="text-xl"><text class="cuIcon-share"></text></view>
			</view>
			<view class="text-lg text-bold text-bold padding-tb-sm">{{goodsDetail.goods_name}}</view>
			<view class="flex justify-between text-gray text-sm">
				<text class="">类型:￥{{goodsDetail.cost_price}}</text><text>库存:{{goodsDetail.stock}}{{goodsDetail.unit_name}}</text><text>已拼:{{goodsDetail.sales}}</text>
			</view>
		</view>

		<view class="cu-list menu solid-top">
			<view class="cu-item">
				<view class="content padding-tb-sm" @tap="showModal" data-target="CouponModal">
					<text class="text-gray">优惠券:</text><text class="padding-left-sm">满400减30</text>
				</view>
				<view class="action">
					<text class="cuIcon-right"></text>
				</view>
			</view>

			<view class="cu-item margin-top-sm">
				<view class="content padding-tb-sm" @tap="showModal" data-target="TypeModal">
					<text class="text-gray">已选择:</text><text class="padding-left-sm">已选择这个型号</text>
				</view>
				<view class="action">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<!-- 用户评价 -->
			<view class="cu-item margin-top-sm">
				<view class="content padding-tb-sm">
					<text class="text-lg">用户评价(99+)</text>
				</view>
				<navigator url="comment">
					<view class="action">
						98% 的好评率 <text class="cuIcon-right"></text>
					</view>
				</navigator>
			</view>

			<view class="bg-white padding">
				<view class="flex align-center">
					<view class="cu-avatar round" style="background-image: url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view>
					<text class="padding-lr-sm">名字名字名字</text>
					<uni-rate value="3.8" size="14" active-color="#e54d42" :disabled="true"></uni-rate>
				</view>
				<view>
					<view class="padding-tb-sm text-gray">2019-10-14 14:38:7 <text class="padding-left-xs">买了什么型号</text></view>
					<view class="">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</view>
				</view>
			</view>
			<!-- 产品详情 -->
			<view class="cu-bar bg-white margin-top-sm">
				<view class="content">产品介绍</view>
			</view>
			<parser :html="goodsDetail.content" img-mode="widthFix" lazy-load="true" show-with-animation="true" :tag-style="imgStyle"></parser>
			<view class="cu-tabbar-height"></view>
		</view>

		<!-- 底部固定开始 -->
		<view class="box">
			<view class="cu-bar bg-white tabbar border shop foot">
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-green">
						<view class="cu-tag badge"></view>
					</view> 客服
				</button>
				<view class="flex">
					<button class="cu-btn bg-orange shadow-blur">加入购物车</button>
					<navigator url="../order/create" hover-class="none">
						<button class="cu-btn bg-red shadow-blur">立即购买</button>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 底部固定结束 -->
	</view>
</template>

<script>
	import screenSwiper from '@/components/swiper-items/swiper-items.vue'
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import parser from "@/components/jyf-Parser/index.vue"
	export default {
		components: {
			screenSwiper,
			uniRate,
			parser,
		},
		data() {
			return {
				modalName: null,
				showLoading: false,
				goodsDetail: [],
				slider_images: [],
				baseUrl: this.$api.baseUrl,
				imgStyle: {
					img: 'vertical-align:middle;'
				}
			}
		},
		onLoad(options) {
			this.$api.goodsView({
				id: options.id
			}).then((res) => {
				this.goodsDetail = res.data.data,
					this.slider_images = res.data.data.slider_images.split(','),
				this.showLoading = false
			})
		},
		methods: {
			
			// 预览图片
			previewImage(e) {
				uni.previewImage({
					urls: '',
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏了'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.bg-loading {
		position: fixed;
		  height: 100%;
		  width: 100%;
	}
	.cu-btn {
		height: 100upx;
		border-radius: 0;
	}
</style>
